{% block sw_card %}

<div class="sw-card-wrapper">

    <sw-extension-component-section
        v-if="positionIdentifier"
        :position-identifier="positionIdentifier + '__before'"
    />

    <div
        class="sw-card"
        :class="cardClasses()"
        v-bind="$attrs"
    >
        <div
            v-if="showHeader"
            class="sw-card__header"
        >
            <div
                v-if="hasAvatar"
                class="sw-card__avatar"
            >
                <slot name="avatar">
                </slot>
            </div>

            <div class="sw-card__titles">
                {% block sw_card_title %}
                <slot name="title">
                    <div
                        v-if="title"
                        class="sw-card__title"
                    >
                        {{ title }}

                        <sw-ai-copilot-badge v-if="aiBadge" />
                    </div>
                </slot>
                    {% endblock %}

                {% block sw_card_subtitle %}
                <slot name="subtitle">
                    <div
                        v-if="subtitle"
                        class="sw-card__subtitle"
                    >
                        {{ subtitle }}
                    </div>
                </slot>
                    {% endblock %}
            </div>

            <div class="sw-card__titles-right-slot">
                <slot name="header-right"></slot>
            </div>

            <slot
                name="tabs"
            ></slot>
        </div>

        {% block sw_card_toolbar %}
        <div
            v-if="!!$slots.toolbar"
            class="sw-card__toolbar"
        >
            {% block sw_card_toolbar_inner %}
            <slot name="toolbar">
                {% block sw_card_slot_toolbar %}{% endblock %}
            </slot>
            {% endblock %}
        </div>
            {% endblock %}

        {% block sw_card_content %}
        <div
            class="sw-card__content"
            :class="cardContentClasses"
        >
            <div
                v-if="contextSlot"
                class="sw-card__context-menu"
            >
                <sw-context-button>
                    <slot name="context-actions">
                        {% block sw_card_slot_context_menu_actions %}{% endblock %}
                    </slot>
                </sw-context-button>
            </div>
            <slot>
                {% block sw_card_slot_default %}{% endblock %}
            </slot>
            <slot
                name="grid"
                :title="title"
            >
                {% block sw_card_slot_grid %}{% endblock %}
            </slot>
            <slot name="footer">
                {% block sw_card_slot_footer %}{% endblock %}
            </slot>

            {% block sw_card_loader %}
            <sw-loader v-if="isLoading" />
            {% endblock %}
        </div>
        {% endblock %}
    </div>

    <sw-extension-component-section
        v-if="positionIdentifier"
        :position-identifier="positionIdentifier + '__after'"
    />

</div>

{% endblock %}
